<template>
  <div class="lc-file-upload1">
    <div class="upload">
      <el-upload
        ref="upload"
        class="upload-demo"
        multiple
        action=""
        drag
        :auto-upload="true"
        :http-request="upload"
        :show-file-list="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖拽到此处或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            <!-- 提示文本 -->
          </div>
        </template>
      </el-upload>
    </div>
    <div class="table">
      <div class="table-btns">
        <el-button type="primary" @click="batchDownload">批量下载</el-button>
        <el-button @click="batchDelete">批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; height: 400px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" width="55">
          <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="文件名" width="240" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.originalFilename }}</template>
        </el-table-column>
        <el-table-column property="size" label="大小" width="100" />
        <el-table-column
          property="createTime"
          label="上传日期"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column property="username" label="上传人" />
        <el-table-column align="center" label="操作" width="300">
          <template #default="scope">
            <el-button
              text
              size="small"
              type="primary"
              @click="handleDownload(scope.$index, scope.row)"
            >
              下载
            </el-button>
            <el-popconfirm
              title="是否确认删除?"
              width="180"
              :icon="InfoFilled"
              icon-color="#626AEF"
              @confirm="confirm"
            >
              <template #reference>
                <el-button
                  text
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
              <template #actions="{ confirm, cancel }">
                <el-button size="small" @click="cancel" style="display: inline"
                  >取消</el-button
                >
                <el-button type="primary" size="small" @click="confirm">
                  确认
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { UploadFilled, InfoFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { deleteUploadFile } from "@/apis/upload";

const props = withDefaults(
  defineProps<{
    tableData: Array<any>;
  }>(),
  {
    tableData: () => [],
  },
);

watch(
  () => props.tableData,
  (newValue) => {
    tableData.value = newValue;
  },
);

const tableData = ref(props.tableData);
const tableSelection = ref([]);
const selectItem = ref();

const emits = defineEmits<{
  (e: "page-change"): void;
}>();

// 删除文件
const confirm = () => {
  let params = selectItem.value.url;
  deleteUploadFile(params).then((res) => {
    ElMessage.success({ message: "删除成功" });
    emits("page-change");
  });
};
const handleDelete = (index: any, row: any) => {
  selectItem.value = row;
};
// 下载文件
const handleDownload = (index: any, row: any) => {
  const url = `/basic/downloadByUrl?url=${encodeURIComponent(row.url)}`;
  let downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = row.filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};
// 上传文件
const upload: any = (params: any) => {
  let _file = params.file;
  let formData = new FormData();
  formData.append("file", _file);
  formData.append("fileName", params.file.name);
  // 定义上传用户
  formData.append("attrs", '{"username":"邵渊"}');
  let config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };
  axios
    .post("/xydElement/basic/upload", formData, config)
    .then((res) => {
      emits("page-change");
      ElMessage.success({ message: "文件上传成功" });
    })
    .catch((err) => {
      ElMessage.error({ message: "上传失败" });
    });
};

// 批量下载
const batchDownload = (val: any) => {
  let urlList = "";
  let timeStamp = new Date().getTime();
  tableSelection.value.map((item: any) => {
    urlList = urlList + "," + encodeURIComponent(item.url);
  });
  urlList = urlList.substring(1);
  window.open(
    `http://192.168.0.126:12312/basic/downloadByUrls?timestamp=${timeStamp}&urls=${urlList}`,
  );
};
// 批量删除
const batchDelete = (val: any) => {
  tableSelection.value.map((item: any, index) => {
    if (index == tableSelection.value.length - 1) {
      deleteUploadFile(item.url).then(() => {
        ElMessage.success({ message: "删除成功" });
        emits("page-change");
      });
    }
    deleteUploadFile(item.url);
  });
};
// 下拉选择
const handleSelectionChange = (val: any) => {
  tableSelection.value = val;
};
</script>

<style lang="scss" scoped>
.lc-file-upload1 {
  display: flex;
  .upload {
    margin: 0px 20px;
    .upload-demo {
      width: 120px;
    }
  }
  .table {
    width: 1000px;
    .table-btns {
      display: flex;
      justify-content: end;
      flex-wrap: wrap;
    }
  }
}
:deep(.el-table__row) {
  height: 40px;
}
</style>
